<template>
<div class="navbar-area">
  <div class="main-navbar">
    <nav class="navbar navbar-expand-lg navbar-light">
      <a href="index.html" class="navbar-brand d-flex align-items-center">
        <img class="logo" src="/src/assets/images/logo.png" alt="image">
      </a>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">

        <div class="search-box m-auto">

        </div>
        <div class="others-options d-flex align-items-center">
          <div class="option-item">
            <a href="index.html" class="home-btn"><i class="flaticon-home"></i></a>
          </div>
          <div class="option-item">
            <div class="dropdown friend-requests-nav-item">
              <a href="#" class="dropdown-bs-toggle" role="button" data-bs-toggle="dropdown"
                 aria-haspopup="true" aria-expanded="false">
                <div class="friend-requests-btn">
                  <i class="flaticon-user"></i>
                  <span>3</span>
                </div>
              </a>
              <div class="dropdown-menu">
                <div
                    class="friend-requests-header d-flex justify-content-between align-items-center">
                  <h3>好友申请</h3>
                  <i class="flaticon-menu"></i>
                </div>
                <div class="friend-requests-body" data-simplebar>
                  <div class="item d-flex align-items-center">
                    <div class="figure">
                      <a href="#"><img src="/src/assets/images/user/user-2.jpg"
                                       class="rounded-circle" alt="image"></a>
                    </div>
                    <div
                        class="content d-flex justify-content-between align-items-center">
                      <div class="text">
                        <h4><a href="#">小熊</a></h4>
                        <span>26 粉丝</span>
                      </div>
                      <div class="btn-box d-flex align-items-center">
                        <button class="delete-btn d-inline-block me-2"
                                data-bs-toggle="tooltip" data-bs-placement="top"
                                title="拒绝" type="button"><i
                            class="ri-close-line"></i></button>
                        <button class="confirm-btn d-inline-block"
                                data-bs-toggle="tooltip" data-bs-placement="top"
                                title="同意" type="button"><i
                            class="ri-check-line"></i></button>
                      </div>
                    </div>
                  </div>

                  <!-- <div class="view-all-requests-btn">
                    <a href="friends.html" class="default-btn">显示全部申请</a>
                  </div> -->
                </div>
              </div>
            </div>
          </div>
          <div class="option-item">
            <div class="dropdown messages-nav-item">
              <a href="#" class="dropdown-bs-toggle" role="button" data-bs-toggle="dropdown"
                 aria-haspopup="true" aria-expanded="false">
                <div class="messages-btn">
                  <i class="flaticon-email"></i>
                  <span>2</span>
                </div>
              </a>
              <div class="dropdown-menu">
                <div
                    class="messages-header d-flex justify-content-between align-items-center">
                  <h3>消息</h3>
                  <i class="flaticon-menu"></i>
                </div>

                <div class="messages-body" data-simplebar>
                  <div class="item d-flex justify-content-between align-items-center">
                    <div class="figure">
                      <a href="#"><img src="/src/assets/images/user/user-11.jpg"
                                       class="rounded-circle" alt="image"></a>
                    </div>
                    <div class="text">
                      <h4><a href="#">张三</a></h4>
                      <span>你好，很高兴认识你</span>
                    </div>
                  </div>

                  <div class="view-all-messages-btn">
                    <a href="messages.html" class="default-btn">查看全部消息</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="option-item">
            <div class="dropdown notifications-nav-item">
              <a href="#" class="dropdown-bs-toggle" role="button" data-bs-toggle="dropdown"
                 aria-haspopup="true" aria-expanded="false">
                <div class="notifications-btn">
                  <i class="flaticon-bell"></i>
                  <span>1</span>
                </div>
              </a>
              <div class="dropdown-menu">
                <div
                    class="notifications-header d-flex justify-content-between align-items-center">
                  <h3>通知</h3>
                  <i class="flaticon-menu"></i>
                </div>
                <div class="notifications-body" data-simplebar>

                  <div class="item d-flex justify-content-between align-items-center">
                    <div class="figure">
                      <a href="#"><img src="/src/assets/images/user/user-12.jpg"
                                       class="rounded-circle" alt="image"></a>
                    </div>
                    <div class="text">
                      <h4><a href="#">韩梅梅</a></h4>
                      <span>通过了你的好友申请</span>
                      <span class="main-color">2 天前</span>
                    </div>
                  </div>

                  <!-- <div class="view-all-notifications-btn">
                    <a href="notifications.html" class="default-btn">查看全部通知</a>
                  </div> -->
                </div>
              </div>
            </div>
          </div>
          <div class="option-item">
            <div class="dropdown language-option">

            </div>
          </div>
          <div class="option-item">
            <div class="dropdown profile-nav-item">
              <a href="#" class="dropdown-bs-toggle" role="button" data-bs-toggle="dropdown"
                 aria-haspopup="true" aria-expanded="false">
                <div class="menu-profile">
                  <img :src="user.userInfo.headPic" class="rounded-circle"
                       alt="image">
                  <span class="name">{{user.userInfo.nickname}}</span>
                  <span class="status-online"></span>
                </div>
              </a>
              <div class="dropdown-menu">

                <ul class="profile-body">
                  <li><i class="flaticon-user"></i> <a href="my-profile.html">个人中心</a></li>

                  <li><i class="flaticon-privacy"></i> <a href="privacy.html">修改密码</a>
                  </li>
                  <li><i class="flaticon-logout"></i> <a href="login.html">退出</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </nav>
  </div>
</div>
</template>

<script setup>
import {ref, reactive, onMounted} from "vue";
import axios from '@/plugins/axios.js'
//查询 用户信息
import loginUser from '@/stores/LoginUser.js'
let user = ref({
  "userInfo":{}
})

onMounted(() => {
  user.value = loginUser().userModel;
});
</script>

<style scoped>

</style>